<template>
  <div class="g-wrapper" v-if="user">
    <header class="g-header">
      <div class="logo" @click="$router.push('/admin/mainstay/home')">婚庆APP管理后台</div>
      <el-menu
        theme="dark"
        :default-active="'/admin/sys/welcome'"
        class="navbar"
        mode="horizontal"
        router
      >
        <!--<el-menu-item index="/admin/sys/welcome"></el-menu-item>-->

        <!--此处为增加的代码-->
      </el-menu>
      <!--<ul class="navbar">-->
      <!--<li v-for="nav in navbars" @click="$router.push(nav.route)">{{nav.name}}</li>-->
      <!--</ul>-->
      <div class="user-info">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            <img class="user-logo" src="../../assets/default-avatar.jpg" />
            {{username}}
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item> -->
            <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
            <el-dropdown-item command="changeUser">更改用户</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
    <div class="g-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "admin",
      user: ""
    };
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("token"));
  },
  methods: {
    async handleCommand(command) {
      if (command === "loginout") {
        this.loginout();
      } else if (command === "modifyPwd") {
        this.$router.push("./changePwd");
      } else if (command === "changeUser") {
        this.loginout();
      }
    },
    loginout() {
      this.$message({
        type: "success",
        message: "正在退出登录!"
      });
      localStorage.removeItem("token");
      setTimeout(() => {
        this.$router.push("/admin/login");
      }, 2000);
    }
  }
};
</script>

<style lang="less">
.g-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .g-header {
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    color: white;
    background-color: #324157;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);

    .logo {
      float: left;
      width: 250px;
      margin-left: 20px;
      cursor: pointer;
    }

    .navbar {
      font-size: 16px;
      overflow: hidden;
      display: inline-block;
      background-color: #324157;

      li {
        float: left;
        width: 100px;
        text-align: center;
        cursor: pointer;
      }
    }

    .user-info {
      float: right;
      padding-right: 30px;
      font-size: 16px;

      .el-dropdown-link {
        position: relative;
        display: inline-block;
        padding-left: 40px;
        cursor: pointer;
        vertical-align: middle;
        color: white;
      }

      .user-logo {
        position: absolute;
        left: 0;
        top: 15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
    }
  }

  .g-sidebar {
    display: block;
    position: absolute;
    width: 220px;
    left: 0;
    top: 60px;
    bottom: 0;
    background-color: #020203;
    overflow-y: scroll;

    > ul {
      min-height: 100%;
    }
  }

  .g-content {
    background: none repeat scroll 0 0 #fff;
    position: absolute;
    left: 220px;
    right: 0;
    top: 60px;
    bottom: 0;
    width: auto;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    background-color: #f2f4f6;

    > div {
      padding: 20px;
      border-radius: 4px;
      background-color: white;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
    }
  }
}
</style>
